﻿<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header :: common_header(~{::title},~{::link},~{})">
    <title>设备信息</title>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
    设备信息<a class="btn btn-success radius r"
           style="line-height: 1.6em; margin-top: 3px"
           href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a>
</nav>

<div class="page-container">
    <div class="text-c">
        <a class="btn btn-primary radius" data-title="添加设备"
           onclick="device_add('添加设备','add')" href="javascript:;"><i
                class="Hui-iconfont">&#xe600;</i> 添加设备</a>

        <input type="hidden" name="programId" id="programId" th:value="${programId}"/>
        <input type="text" name="programName" id="programName" placeholder="项目名称" readonly="readonly"
               th:value="${programName}" style="width: 150px" class="input-text"/>
        <input type="text" name="seriaNo" id="seriaNo" placeholder="黑匣子编码"
               style="width: 150px" class="input-text"></input>
        <input
                type="text" name="registNo" id="registNo" placeholder="设备备案号"
                style="width: 150px" class="input-text"></input>
        <span
                class="select-box" style="width: 150px"> <select
                class="select" name="typeId" id="typeId">
					<option value="">请选择类型</option>
					<option th:each="dt:${deviceTypes}"
                            th:value="${dt.key}" th:text="${dt.value}"></option>
			</select>
			</span>
        <button name="" id="" class="btn btn-success" onclick="Search()">
            <i class="Hui-iconfont">&#xe665;</i> 查询
        </button>
        <button onclick="removeIframe()" class="btn btn-primary radius">关闭</button>

    </div>
    <div class="mt-20">
        <table
                class="table table-border table-bordered table-bg table-hover table-sort table-responsive"
                id="dataGrid">
        </table>
    </div>
</div>
<div th:replace="_list_footer :: foot"></div>
<script type="text/javascript">
    $(function () {
        //初始数据
        initDataGrid();
    })

    function initDataGrid() {
        $("#dataGrid").bootstrapTable({
            method: "GET",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            url: '../deviceInfo/deviceInfoList',
            queryParams: queryParams,
            queryParamsType: '',
            pagination: true,//显示分页条页码
            striped: true,//隔行变色
            pageNumber: 1,//首页页码
            pageSize: 10,//每页数据条数
            uniqueId: "deviceInfoId",
            sidePagination: "server",//在服务器分页
            toolbar: "#toolbar",//工具栏
            columns: [{
                title: "设备编码",
                field: "deviceId",
                width: 60
            }, {
                title: "项目名称",
                field: "programName",
                class: 'colStyle',
                width: 120
            }, {
                title: "设备类型",
                field: "deviceType",
                width: 80,
                formatter: deviceTypeFormatter
            }, {
                title: "黑匣子编码",
                field: "serialNo",
                width: 120
            }, {
                title: "设备备案号",
                field: "registNo",
                width: 120
            }, {
                title: "录入时间",
                field: "createTime",
                width: 150,
                //——修改——获取日期列的值进行转换
                formatter: function (value, row, index) {
                    return changeDateFormat(value)
                }
            }, {
                title: "最后在线时间",
                field: "lastHeartbeatTime",
                width: 150,
                //——修改——获取日期列的值进行转换
                formatter: function (value, row, index) {
                    return changeDateFormat(value)
                }
            }, {
                field: 'action',
                title: '操作',
                width: 80,
                halign: 'center',
                align: 'center',
                formatter: actionFormatter,
                events: 'actionEvents',
                clickToSelect: true
            }
            ]

        });
    }

    function deviceTypeFormatter(value, row, index) {
        var buttonShow = "";
        if (value == "01") {
            buttonShow = "<span class=\"label radius\">升降机</span>";
        } else if (value == "02") {
            buttonShow = "<span class=\"label label-fail radius\">塔吊</span>";
        } else if (value == "03") {
            buttonShow = "<span class=\"label label-success radius\">环境监测</span>";
        } else if (value == "04") {
            buttonShow = "<span class=\"label label-success radius\">考勤</span>";
        } else if (value == "05") {
            buttonShow = "<span class=\"label label-success radius\">监控</span>";
        }
        return buttonShow;
    }

    function changeDateFormat(cellval) {
        if (cellval != null) {
            var date = new Date(cellval);
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

            return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
        }
    }


    function actionFormatter(value, row, index) {

        var htm = "<a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"deviceInfo_edit('编辑设备','edit',"
            + row.deviceId + ",'" + row.programName
            + "')\" href=\"javascript:;\" title=\"编辑\"><i class=\"Hui-iconfont\">&#xe6df;</i></a>"
            + "<a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"deviceInfo_del(this,"
            + row.deviceId + ")\" href=\"javascript:;\" title=\"删除\"><i class=\"Hui-iconfont\">&#xe6e2;</i></a>";
        return htm;
    };

    /*删除*/
    function deviceInfo_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'POST',
                async: true,
                url: "delete?deviceId=" + id,
                dataType: 'json',
                success: function (data) {
                    $('#dataGrid').bootstrapTable('refresh');
                },
                error: function (data) {
                    alert(JSON.stringify(data));
                },
            });
            layer.close(index);
        });
    }

    function queryParams(params) {
        var param = {
            rows: params.limit,
            sort: params.sort,
            sortOrder: params.order,
            offset: params.offset,
            pageSize: params.pageSize,
            pageNum: params.pageNumber,
            programId: $("#programId").val(),
            seriaNo: $("#seriaNo").val(),
            registNo: $("#registNo").val(),
            typeId: $("#typeId").val()
        };

        return param;
    }

    //查询
    function Search() {
        $('#dataGrid').bootstrapTable('refresh');
    }


    /*添加*/
    function device_add(title, url, w, h) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url + "?programId=" + $("#programId").val() + "&programName=" + $("#programName").val(),
            end: function () {//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。layer.open关闭事件
                $('#dataGrid').bootstrapTable('refresh');
            }
        });
        layer.full(index);
    }

    function deviceInfo_edit(title, url, id, programName, w, h) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url + "?deviceId=" + id + "&programName=" + programName,
            end: function () {//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。layer.open关闭事件
                $('#dataGrid').bootstrapTable('refresh');
            }
        });
        layer.full(index);
    }
</script>
</body>
</html>